<template>
  <div class="landing-container">
    <!-- 头部导航 -->
    <el-header class="landing-header">
      <div class="header-content">
        <div class="logo">
          <el-icon><House /></el-icon>
          <span>智能装修设计系统</span>
        </div>
        <div class="header-actions">
          <el-button type="primary" @click="$router.push('/login')">
            <el-icon><User /></el-icon>
            登录
          </el-button>
          <el-button @click="$router.push('/register')">
            <el-icon><UserFilled /></el-icon>
            注册
          </el-button>
        </div>
      </div>
    </el-header>

    <!-- 主要内容 -->
    <el-main class="landing-main">
      <!-- 英雄区域 -->
      <section class="hero-section">
        <div class="hero-content">
          <h1 class="hero-title">AI 驱动的智能装修设计</h1>
          <p class="hero-subtitle">
            上传户型图，描述您的需求，AI 为您生成专业的装修方案和效果图
          </p>
          <div class="hero-actions">
            <el-button type="primary" size="large" @click="$router.push('/register')">
              <el-icon><MagicStick /></el-icon>
              立即开始设计
            </el-button>
            <el-button size="large" @click="scrollToFeatures">
              <el-icon><ArrowDown /></el-icon>
              了解更多
            </el-button>
          </div>
        </div>
        <div class="hero-image">
          <el-icon size="200" color="#409eff"><House /></el-icon>
        </div>
      </section>

      <!-- 功能特色 -->
      <section class="features-section" ref="featuresRef">
        <div class="features-container">
          <h2 class="section-title">为什么选择我们</h2>
          <el-row :gutter="40">
            <el-col :span="8" v-for="feature in features" :key="feature.title">
              <el-card class="feature-card" shadow="hover">
                <div class="feature-icon">
                  <el-icon :size="60" :color="feature.color">
                    <component :is="feature.icon" />
                  </el-icon>
                </div>
                <h3 class="feature-title">{{ feature.title }}</h3>
                <p class="feature-description">{{ feature.description }}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 工作流程 -->
      <section class="workflow-section">
        <div class="workflow-container">
          <h2 class="section-title">简单三步，完成设计</h2>
          <el-row :gutter="40">
            <el-col :span="8" v-for="(step, index) in workflow" :key="index">
              <div class="workflow-step">
                <div class="step-number">{{ index + 1 }}</div>
                <div class="step-content">
                  <h3>{{ step.title }}</h3>
                  <p>{{ step.description }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </section>

      <!-- 开始使用 -->
      <section class="cta-section">
        <div class="cta-container">
          <h2>准备开始您的装修设计之旅？</h2>
          <p>立即注册，体验 AI 驱动的智能装修设计</p>
          <el-button type="primary" size="large" @click="$router.push('/register')">
            <el-icon><UserFilled /></el-icon>
            免费注册
          </el-button>
        </div>
      </section>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="landing-footer">
      <div class="footer-content">
        <p>&copy; 2024 智能装修设计系统. 基于AI技术的智能装修方案生成平台.</p>
      </div>
    </el-footer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { House, User, UserFilled, MagicStick, ArrowDown, Picture, Setting, Clock } from '@element-plus/icons-vue'

const featuresRef = ref()

const features = [
  {
    icon: 'MagicStick',
    title: 'AI 智能设计',
    description: '基于先进的 AI 技术，根据您的户型图和需求，自动生成专业的装修方案',
    color: '#409eff'
  },
  {
    icon: 'Picture',
    title: '效果图生成',
    description: 'AI 自动生成装修效果图，让您直观看到设计效果，提前预览装修成果',
    color: '#67c23a'
  },
  {
    icon: 'Setting',
    title: '个性化定制',
    description: '支持多种装修风格和房间类型，满足不同家庭的个性化装修需求',
    color: '#e6a23c'
  },
  {
    icon: 'Clock',
    title: '快速高效',
    description: '几分钟内完成设计方案，告别传统装修设计的漫长等待时间',
    color: '#f56c6c'
  }
]

const workflow = [
  {
    title: '上传户型图',
    description: '上传您的房屋户型图，AI 将分析空间布局和结构特点'
  },
  {
    title: '描述需求',
    description: '填写装修风格、预算范围、功能需求等信息，让 AI 了解您的想法'
  },
  {
    title: '获得方案',
    description: 'AI 生成详细的装修方案和效果图，您可以查看、下载和分享'
  }
]

const scrollToFeatures = () => {
  featuresRef.value?.scrollIntoView({ behavior: 'smooth' })
}
</script>

<style scoped>
.landing-container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.landing-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 0 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 24px;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 10px;
}

.landing-main {
  flex: 1;
  padding: 0;
}

.hero-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 80px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}

.hero-content {
  max-width: 600px;
  text-align: center;
  margin-right: 60px;
}

.hero-title {
  font-size: 48px;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 20px;
  line-height: 1.2;
}

.hero-subtitle {
  font-size: 20px;
  color: #606266;
  margin-bottom: 40px;
  line-height: 1.6;
}

.hero-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.8;
}

.features-section {
  padding: 80px 20px;
  background: white;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  font-size: 36px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 60px;
}

.feature-card {
  text-align: center;
  padding: 40px 20px;
  height: 100%;
  border: none;
  transition: transform 0.3s;
}

.feature-card:hover {
  transform: translateY(-5px);
}

.feature-icon {
  margin-bottom: 20px;
}

.feature-title {
  font-size: 24px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 16px;
}

.feature-description {
  color: #606266;
  line-height: 1.6;
  font-size: 16px;
}

.workflow-section {
  padding: 80px 20px;
  background: #f8f9fa;
}

.workflow-container {
  max-width: 1200px;
  margin: 0 auto;
}

.workflow-step {
  text-align: center;
  position: relative;
}

.step-number {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  margin: 0 auto 20px;
}

.step-content h3 {
  font-size: 20px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 12px;
}

.step-content p {
  color: #606266;
  line-height: 1.6;
}

.cta-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  text-align: center;
}

.cta-container h2 {
  font-size: 36px;
  font-weight: 600;
  margin-bottom: 16px;
}

.cta-container p {
  font-size: 18px;
  margin-bottom: 40px;
  opacity: 0.9;
}

.landing-footer {
  background-color: #2c3e50;
  color: white;
  text-align: center;
  padding: 20px;
}

.footer-content p {
  margin: 0;
  font-size: 14px;
  opacity: 0.8;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .hero-section {
    flex-direction: column;
    text-align: center;
  }
  
  .hero-content {
    margin-right: 0;
    margin-bottom: 40px;
  }
  
  .hero-title {
    font-size: 36px;
  }
  
  .hero-actions {
    flex-direction: column;
    align-items: center;
  }
  
  .features-section .el-col,
  .workflow-section .el-col {
    margin-bottom: 30px;
  }
}
</style>
